<template>
    <div class="table-container" v-loading="loading">

        <el-tabs type="border-card" style="min-width: 100% !important;" v-model="activeName">
            <el-tab-pane label="凉山州第一人民医院ICU危重症患者APACHE II评分登记表" name="apache">

                <apache></apache>
            </el-tab-pane>
            <el-tab-pane label="统计" name="score">
                <div class="search">
                    <el-form>
                        <el-form-item label="开始时间">
                            <el-date-picker :clearable="false" v-model="time" type="month" placeholder="请选择才开始时间"
                                format="YYYY-MM" value-format="YYYY-MM"></el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-button style="margin-left: 20px;" type="primary" @click="getData">统计</el-button>
                    <el-button style="margin-left: 20px;" type="success" @click="exportExcel">导出数据</el-button>
                </div>
                <el-table :height="!tableData.length ? '700' : '100%'" :data="tableData"
                    :header-cell-style="{ background: '#409EFF', color: '#fff' }">
                    <el-table-column label="时间" align="center" prop="MonthYear"></el-table-column>
                    <el-table-column label="入室人数" align="center" prop="MonthYear">
                        <template #default="scope">
                            <!-- <el-tag>{{ scope.row.InpatientNumber }}</el-tag> -->
                            {{ scope.row['0-9'] + scope.row['10-14'] + scope.row['15-19'] + scope.row['20-24'] +
                                scope.row['>=25'] }}
                        </template>
                    </el-table-column>

                    <el-table-column label="0~9" align="center" prop="0-9"></el-table-column>
                    <el-table-column label="10~14" align="center" prop="10-14"></el-table-column>
                    <el-table-column label="15~19" align="center" prop="15-19"></el-table-column>
                    <el-table-column label="20~24" align="center" prop="20-24"></el-table-column>
                    <el-table-column label="≥25" align="center" prop=">=25"></el-table-column>
                    <template #empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
            </el-tab-pane>


        </el-tabs>
    </div>
</template>

<script setup>
import { getApacheTotal } from '../api/book'
import { ref, onMounted } from 'vue'
// 引入 xlsx 库
import * as XLSX from 'xlsx'
// 引入 Element Plus 的 Message
import { ElMessage } from 'element-plus'
import apache from "./apache.vue";
const activeName = ref("score");
const time = ref('')
const tableData = ref([])
const loading = ref(false)
const getTodayDate = () => {
    const today = new Date()
    const year = today.getFullYear()
    // const month = String(today.getMonth() + 1).padStart(2, '0')
    const month = ''
    const day = String(today.getDate()).padStart(2, '0') // 添加日期部分
    return `${year}-${month}`
}

const getData = () => {
    const data = {
        date: time.value
    }
    loading.value = true
    getApacheTotal(data)
        .then((res) => {
            tableData.value = res
            loading.value = false
        }).catch(err => {
            loading.value = false
        })
}

// 导出Excel的方法
const exportExcel = () => {
    if (!tableData.value || tableData.value.length === 0) {
        // 使用 Element Plus 的 Message 替代 alert
        ElMessage({
            message: '没有数据可以导出',
            type: 'warning'
        })
        return
    }

    // 准备表头和数据
    const excelData = tableData.value.map(item => {
        return {
            '时间': item.MonthYear,
            '入室人数': item['0-9'] + item['10-14'] + item['15-19'] + item['20-24'] + item['>=25'],
            '0-9': item['0-9'],
            '10-14': item['10-14'],
            '15-19': item['15-19'],
            '20-24': item['20-24'],
            '≥25': item['>=25']
        }
    })

    // 创建工作簿
    const workbook = XLSX.utils.book_new()

    // 创建工作表
    const worksheet = XLSX.utils.json_to_sheet(excelData)

    // 设置列宽
    worksheet['!cols'] = [
        { wch: 15 }, // 时间列宽度
        { wch: 10 }, // 0~9列宽度
        { wch: 10 }, // 10~14列宽度
        { wch: 10 }, // 15~19列宽度
        { wch: 10 }, // 20~24列宽度
        { wch: 10 }  // ≥25列宽度
    ]

    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, '分数统计')

    // 导出文件
    const fileName = `分数统计_${time.value || getTodayDate()}.xlsx`
    XLSX.writeFile(workbook, fileName)

    // 导出成功提示
    ElMessage({
        message: '导出成功',
        type: 'success'
    })
}

onMounted(() => {
    time.value = getTodayDate()
    getData()
})
</script>

<style scoped>
.table-container {
    width: 96vw !important;
}

.search {
    margin-bottom: 20px;
    text-align: left;
}
</style>

<style scoped>
.table-container {
    width: 96vw !important;
}

.search {
    margin-bottom: 20px;
    text-align: left;
    display: flex;
}
</style>